<template>
  <el-container class="bigContainer">
    <el-header class="header" style="height: 100px">
      <div class="logo"></div>
      <span class="title"
        >朗&nbsp;驰&nbsp;科&nbsp;技&nbsp;内&nbsp;部&nbsp;管&nbsp;理&nbsp;平&nbsp;台</span
      >
      <div class="right">
        <el-dropdown :hide-on-click="false" @command="itemClick">
          <span class="el-dropdown-link"> 用户中心 </span>
          <el-dropdown-menu slot="dropdown" style="margin-top: -30px">
            <el-dropdown-item
              style="font-family: 华文行楷; font-size: 26px; color: black"
              >{{ name }}</el-dropdown-item
            >
            <el-dropdown-item
              command="logout"
              divided
              style="font-family: 华文行楷; font-size: 26px; color: black"
              >退出按钮</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <span @mouseenter="cancel">用户中心</span> -->
      </div>
    </el-header>
    <el-container style="height: 88%">
      <!-- 侧边导航栏菜单 -->
      <el-aside>
        <el-menu
          router
          background-color="#c1e5fa"
          style="height: 100%"
          @open="addClass"
        >
          <el-submenu
            :index="indexi + ''"
            v-for="(item, indexi) in routes"
            :key="indexi"
            v-show="item.name"
          >
            <template slot="title">
              <i :class="icon[indexi]" :ref="indexi"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="(child, indexj) in item.children"
                :key="indexj"
                :index="child.path"
                >{{ child.name }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 左边菜单栏中的子菜单所对应的路由组件 -->
      <el-main>
        <div class="image"></div>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// import Header from "../components/Header.vue";
export default {
  name: "Home",
  mounted() {
    // console.log(this);
    // console.log(this.routes);
    // console.log(this.$router);
    // console.log(this.$route);//可以获取当前组件所在的路由信息
  },
  data() {
    return {
      // routes: this.$router.options.routes.slice(2),
      icon: [
        "el-icon-user-solid",
        "el-icon-menu",
        "el-icon-document",
        "el-icon-setting",
      ],
      name: sessionStorage.getItem("username"),
    };
  },
  computed: {
    routes() {
      let arr = [];
      if (
        sessionStorage.getItem("role") == 1 ||
        sessionStorage.getItem("role") == 2
      ) {
        return this.$router.options.routes.slice(2);
      } else if (sessionStorage.getItem("role") == 3) {
        this.$router.options.routes[3].children.map((a, i) => {
          if (i == 2) arr.push(a);
        });
        this.$router.options.routes[3].children = arr;
        return this.$router.options.routes.slice(2);
      } else if (sessionStorage.getItem("role") == 4) {
        this.$router.options.routes[3].children.map((a, i) => {
          if (i == 1) arr.push(a);
        });
        this.$router.options.routes[3].children = arr;
        return this.$router.options.routes.slice(2);
      } else if (sessionStorage.getItem("role") == 5) {
        this.$router.options.routes[3].children.map((a, i) => {
          if (i == 3) arr.push(a);
        });
        this.$router.options.routes[3].children = arr;
        return this.$router.options.routes.slice(2);
      }
    },
  },
  methods: {
    addClass(e) {
      for (let key in this.$refs) {
        this.$refs[key][0].className = `${this.icon[key]} `;
      }
      this.$refs[e][0].className = `${this.icon[e]} active`;
    },
    itemClick(cmd) {
      let _this = this;
      if (cmd == "logout") {
        this.$confirm("此操作将注销登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // axios.get("/logout");
            // window.sessionStorage.removeItem("user");

            sessionStorage.clear();
            // location.reload();
            _this.$router.push("/");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      }
    },
  },
};
</script>

<style scoped lang="less">
.el-container {
  height: 100%;
  width: 100%;
  .el-header {
    // position: fixed;
    display: flex;
    justify-content: space-between;
    background-image: linear-gradient(to right, #fff, #9fd4f3, #f5f5f5);
    .logo {
      flex: 11%;
      width: 100%;
      height: 90%;
      margin-top: 6px;
      margin-left: 25px;
      background-image: url("../assets/langchiLogo2.png");
      // background-image: url("../assets/横向logo.svg");
      background-size: 100% 100%;
    }
    .title {
      flex: 83%;
      display: inline-block;
      font-size: 75px;
      width: 50%;
      // font-size: 75px;
      font-family: 华文行楷;
      text-align: center;
      line-height: 110px;
    }
    .right {
      flex: 6%;
      line-height: 110px;
      .el-dropdown-link {
        display: inline-block;
        color: black;
        font-size: 24px;
        font-family: 华文行楷;
        cursor: pointer;
        .el-dropdown-menu {
          .el-dropdown-menu__item {
            color: black !important;
            // font-size: 20px !important;
            // font-family: 华文行楷 !important;
          }
        }
      }
      // .el-dropdown {
      //   width: 100px;
      //   margin: 0;
      //   padding: 0;
      //   border: 0;
      //   cursor: pointer;
      //   font-size: 35px;
      //   font-family: 华文行楷;
      //   background-image: linear-gradient(to right, #ecf1f5, #f5f5f5);
      // }
    }
  }
  .el-container {
    .el-aside {
      overflow: hidden;
      .el-menu {
        .el-submenu {
          i {
            font-size: 20px;
            // font-size: 20px;
            font-weight: 700;
            margin-right: 30px;
            margin-left: 20px;
          }
          span {
            font-size: 30px;
            // font-size: 30px;
            font-family: 华文行楷;
          }
        }
        .el-menu-item {
          font-family: 华文行楷;
          font-size: 20px;
          // font-size: 20px;
          margin-left: 80px;
        }
      }
    }
    .el-main {
      // position: relative;
      // img {
      //   width: 700px;
      //   height: 700px;
      background: url("../assets/opcityLogo.png") no-repeat center;
      // background-size: 159px 222px;
      background-size: 700px 600px;
      // z-index: 999 !important;
      // }
    }
  }
}

.active {
  color: rgb(37, 161, 233);
}
</style>
